<template>
    <div class="home-nav">
        <div>
            <img src="@/assets/logo.png"  style="width: 80px;height: 55px;">
        </div>
        <div class="home-title">星晖启航线上平台</div>
        <div class="home-bar">
            <div class="home-bar-element" @click="Router.homePage"
                :style="{ 'color': Router.home ? '#bfdbfe' : 'black' }">首页</div>
            <div class="home-bar-element" @click="Router.purchasePage"
                :style="{ 'color': Router.purchase ? '#bfdbfe' : 'black' }">商城</div>
            <div class="home-bar-element" @click="Router.dataPage"
                :style="{ 'color': Router.data ? '#bfdbfe' : 'black' }">个人中心</div>
            <div class="home-bar-element" @click="Router.uploadPage"
                :style="{ 'color': Router.upload ? '#bfdbfe' : 'black' }">上传课程</div>
            <div class="home-bar-element" @click="Router.openLogin">登录</div>
            <div class="home-bar-element" @click="Router.openSign">注册</div>
        </div>
    </div>
    
   
    
    <div v-if="Router.showSign === true" class="popup">
        <div class="popup-content">
            <div @click="Router.closeSign" style="margin-left: 95%;background: gray;">×</div>
            <iframe src="../login" width="400px" height="360px"> </iframe>
        </div>
    </div>

 
  <div v-if="Router.showLogin === true" class="popup">
        <div class="popup-content">
            <div @click="Router.closeLogin" style="margin-left: 95%;background: gray;">×</div>
            <iframe src="../login" width="400px" height="360px"> </iframe>
        </div>
    </div>
  
    <div class="body">
        <div class="upload-div">
            <div style="margin: 20px;margin-left: 40px;">
                <h2>上传课程</h2>
            </div>
            <div class="upload-file">
                <div><img src="@/assets/上传图标.png" class="upload-icon"></div>
                <div class="upload-div-button" @click="router.push('/upload')">上传文件</div>
            </div>
        </div>
        <div class="analyze-div">
            <div style="margin: 20px;margin-left: 40px;">
                <h2>数据分析</h2>
            </div>
            <div class="data-analyze">
                <div class="data-div">
                    <div class="data-iconline">
                        <img src="@/assets/播放量图标.png" class="data-icon">
                        <span class="icon-text">播放量</span>
                        <img src="@/assets/热门图标.png" class="data-icon" style="margin-left: 55px;">
                        <span class="icon-text" style="color: red;margin-left: 3px;">10</span>
                    </div>
                    <div class="data-number">{{ information.viewNumber }}</div>
                </div>
                <div class="data-div">
                    <div class="data-iconline">
                        <img src="@/assets/点赞量图标.png" class="data-icon">
                        <span class="icon-text">点赞量</span>
                        <img src="@/assets/热门图标.png" class="data-icon" style="margin-left: 55px;">
                        <span class="icon-text" style="color: red;margin-left: 3px;">10</span>
                    </div>
                    <div class="data-number">{{ information.adoreNumber }}</div>
                </div>
                <div class="data-div">
                    <div class="data-iconline">
                        <img src="@/assets/购买量图标.png" class="data-icon">
                        <span class="icon-text">购买量</span>
                        <img src="@/assets/热门图标.png" class="data-icon" style="margin-left: 55px;">
                        <span class="icon-text" style="color: red;margin-left: 3px;">9</span>
                    </div>
                    <div class="data-number">1452</div>
                </div>
                <div class="data-div">
                    <div class="data-iconline">
                        <img src="@/assets/评论量图标.png" class="data-icon">
                        <span class="icon-text">评论量</span>
                        <img src="@/assets/热门图标.png" class="data-icon" style="margin-left: 55px;">
                        <span class="icon-text" style="color: red;margin-left: 3px;">6</span>
                    </div>
                    <div class="data-number">2346</div>
                </div>
                <div class="data-div">
                    <div class="data-iconline">
                        <img src="@/assets/收藏量图标.png" class="data-icon">
                        <span class="icon-text">收藏量</span>
                        <img src="@/assets/热门图标.png" class="data-icon" style="margin-left: 55px;">
                        <span class="icon-text" style="color: red;margin-left: 3px;">6</span>
                    </div>
                    <div class="data-number">{{ information.collectNumber }}</div>
                </div>
                <div class="data-div">
                    <div class="data-iconline">
                        <img src="@/assets/私信量图标.png" class="data-icon">
                        <span class="icon-text">私信量</span>
                        <img src="@/assets/热门图标.png" class="data-icon" style="margin-left: 55px;">
                        <span class="icon-text" style="color: red;margin-left: 3px;">7</span>
                    </div>
                    <div class="data-number">3816</div>
                </div>
                <div class="data-div">
                    <div class="data-iconline">
                        <img src="@/assets/下载量图标.png" class="data-icon">
                        <span class="icon-text">下载量</span>
                        <img src="@/assets/热门图标.png" class="data-icon" style="margin-left: 55px;">
                        <span class="icon-text" style="color: red;margin-left: 3px;">5</span>
                    </div>
                    <div class="data-number">{{ information.downloadNum }}</div>
                </div>
                <div class="data-div">
                    <div class="data-iconline">
                        <img src="@/assets/转发量图标.png" class="data-icon">
                        <span class="icon-text">转发量</span>
                        <img src="@/assets/热门图标.png" class="data-icon" style="margin-left: 55px;">
                        <span class="icon-text" style="color: red;margin-left: 3px;">9</span>
                    </div>
                    <div class="data-number">2739</div>
                </div>





            </div>

        </div>
    </div>
</template>
<script setup>
import router from '@/router/index';
import { RouterData } from '../home/home';
const { Router } = RouterData();
import { messageData } from '../upload/upload';
const { information } = messageData();
</script>
<style scoped>
@import './data.scss'
</style>